<template>
	<PageWrapper title="webscoket测试" contentFullHeight>
		<div class="flex">
			<div class="w-1/3 bg-white p-4">
				<div class="flex items-center">
					<span class="text-lg font-medium mr-4"> 连接状态: </span>
					<Tag :color="getTagColor">{{ status }}</Tag>
				</div>
				<hr class="my-4" />

				<div class="flex">
					<a-input v-model:value="server" disabled>
						<template #addonBefore> 服务地址 </template>
					</a-input>
					<a-button :type="getIsOpen ? 'danger' : 'primary'" @click="toggle">
						{{ getIsOpen ? '关闭连接' : '开启连接' }}
					</a-button>
				</div>
				<p class="text-lg font-medium mt-4">设置</p>
				<hr class="my-4" />

				<InputTextArea
					placeholder="需要发送到服务器的内容"
					:disabled="!getIsOpen"
					v-model:value="sendValue"
					allowClear
				/>

				<a-button type="primary" block class="mt-4" :disabled="!getIsOpen" @click="handleSend"> 发送 </a-button>
			</div>

			<div class="w-2/3 bg-white ml-4 p-4">
				<span class="text-lg font-medium mr-4"> 消息记录: </span>
				<hr class="my-4" />

				<div class="max-h-80 overflow-auto">
					<ul>
						<li v-for="item in getList" class="mt-2" :key="item.time">
							<div class="flex items-center">
								<span class="mr-2 text-primary font-medium">收到消息:</span>
								<span>{{ formatToDateTime(item.time) }}</span>
							</div>
							<div>
								{{ item.res }}
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</PageWrapper>
</template>

<script lang="ts">
import { PageWrapper } from '#/components';
import { Tag, Input } from 'ant-design-vue';
import { useWebSocket } from '@vueuse/core';
import { computed, defineComponent, reactive, unref, toRefs, watchEffect } from 'vue';
import { useMessage } from '@/hooks/web/useMessage';
import { formatToDateTime } from '@/utils/dateUtil';

export default defineComponent({
	name: 'ws',
	components: {
		PageWrapper,
		Tag,
		[Input.name]: Input,
		InputTextArea: Input.TextArea,
	},
	setup() {
		const state = reactive({
			server: 'ws://192.168.13.11:15081/websocket',
			sendValue: '',
			recordList: [] as { res: string; time: any }[],
		});

		const { createMessage } = useMessage();

		const { status, data, send, close, open } = useWebSocket(state.server, {
			autoReconnect: {
				onFailed() {
					createMessage.error('连接失败');
				},
			},
		});

		watchEffect(() => {
			if (data.value) {
				try {
					state.recordList.push({ res: data.value, time: new Date().getTime() });
				} catch (error) {
					state.recordList.push({ res: JSON.stringify(error), time: new Date().getTime() });
				}
			}
		});

		const getIsOpen = computed(() => status.value == 'OPEN');
		const getTagColor = computed(() => (unref(getIsOpen) ? 'success' : 'red'));

		const getList = computed(() => {
			return [...state.recordList].reverse();
		});

		function toggle() {
			if (unref(getIsOpen)) {
				close();
			} else {
				open();
			}
		}

		function handleSend() {
			send(state.sendValue);
		}

		return {
			status,
			...toRefs(state),
			formatToDateTime,
			toggle,
			getTagColor,
			getIsOpen,
			handleSend,
			getList,
		};
	},
});
</script>

<style></style>
